/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div class="item-title">
      <a class="back" href="javascript:history.back(-1)" title="返回列表">
        <i class="fa fa-arrow-circle-o-left"></i>
      </a>
      <div class="subject">
        <h3>会员管理</h3>
        <h5>网站系统会员索引与管理</h5>
      </div>
    </div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>通过会员管理，你可以进行查看、编辑会员资料等操作</li>
          <li>你可以根据条件搜索会员，然后选择相应的操作</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>

    <div class="mDiv">
      <div class="ftitle">
        <h3>会员列表</h3>
        <h5>(共 {{totalCount}} 条记录)</h5>
      </div>
      <div class="fbutton">
        <div class="add" @click="addMember()">
          <span>
            <i class="el-icon-circle-plus" /> 添加会员
          </span>
        </div>
      </div>
      <div class="fbutton" @click="memberExport()">
        <div title="选定行数据导出excel文件,如果不选中行，将导出列表所有数据" class="add">
          <span>
            <i class="fa fa-share"></i>导出会员
          </span>
        </div>
      </div>
      <div class="fbutton" @click="showDialog()">
        <div title="选定行数据导出excel文件,如果不选中行，将导出列表所有数据" class="add">
          <span>
            <i class="el-icon-s-promotion"></i>发送站内信
          </span>
        </div>
      </div>
      <a href @click.prevent="refresh()" class="refresh-date">
        <div title="刷新数据" class="pReload">
          <i class="fa fa-refresh"></i>
        </div>
      </a>
      <div class="searchbox">
        <el-input
          class="searchinput"
          v-model="user_id"
          width="10"
          size="small"
          placeholder="会员ID"
          clearable
        />
        <el-input
          class="searchinput"
          v-model="account_p"
          width="10"
          size="small"
          placeholder="会员账户"
          clearable
        />
        <el-input
          class="searchinput"
          v-model="nickname"
          width="10"
          size="small"
          placeholder="会员昵称"
          clearable
        />
        <el-button
          class="searchbtn"
          size="small"
          icon="el-icon-search"
          @click="currentPage = 1;getPage()"
        >搜索</el-button>
      </div>
    </div>
    <div class="tablebox">
      <el-table :data="tableData" ref="multipleTable" style="width: 100%;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="ID" prop="user_id" width="80"></el-table-column>
        <el-table-column label="会员昵称" prop="nickname" width="130" show-overflow-tooltip></el-table-column>
        <el-table-column label="会员等级" prop="level" width="80"></el-table-column>
        <el-table-column label="累计消费" prop="total_amount" width="100"></el-table-column>
        <el-table-column label="邮件地址" prop="email" width="180" show-overflow-tooltip>
          <template scope="scope">{{scope.row.email || '--'}}</template>
        </el-table-column>
        <el-table-column label="一级下线" prop="first_leader" width="90"></el-table-column>
        <el-table-column label="二级下线" prop="second_leader" width="90"></el-table-column>
        <el-table-column label="三级下线" prop="third_leader" width="90"></el-table-column>
        <el-table-column label="手机号码" prop="mobile" width="120"></el-table-column>
        <el-table-column label="余额" prop="user_money" width="100"></el-table-column>
        <el-table-column label="积分" prop="pay_points" width="100"></el-table-column>
        <el-table-column label="注册日期" width="100">
          <template slot-scope="scope">{{scope.row.reg_time | datefmt}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="small" @click="detail(scope)" icon="el-icon-edit">详情</el-button>
              <el-button size="small" @click="account(scope)" icon="el-icon-coin">资金</el-button>
              <el-button size="small" @click="address(scope)" icon="el-icon-location">收货地址</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="paginationbox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
    <!-- dialog -->
    <el-dialog
      title="站内信"
      :visible.sync="dialogFormVisible"
      width="540px"
      center
      :modal-append-to-body="false"
      @closed="initData()"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="发送范围：">
          <el-radio-group v-model="form.type">
            <el-radio :label="1" :disabled="isDisabled">以下列表</el-radio>
            <el-radio :label="0">全体会员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="会员列表：" v-if="form.type">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4}"
            v-model="userListTextarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="发送标题：">
          <el-input v-model="form.title" :placeholder="memberMsgTpl.mmt_name"></el-input>
          <p class="notic" style="font-size:5px;">发送标题不填默认为输入框中提示的文字</p>
        </el-form-item>
        <el-form-item label="发送内容：">
          <el-input
            type="textarea"
            v-model="form.content"
            :placeholder="memberMsgTpl.mmt_message_content"
          ></el-input>
          <p class="notic" style="font-size:5px;">发送内容不填默认为输入框中提示的文字，占位符会被相应数据替换</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div class="bottom tc">
          <label class="submit-border">
            <el-button round @click="onSubmit()" :loading="isLoading">发 送</el-button>
          </label>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sendNoticeMsg, getMemberMsgTpl, getUserList } from "@/utils/api";
export default {
  data() {
    return {
      tableData: [],
      currentPage: this.$route.params.currentPage || 1,
      totalCount: 0,
      pageSize: 10,
      user_id: null,
      account_p: null,
      nickname: null,
      first_leader: this.$route.params.first_leader,
      second_leader: this.$route.params.second_leader,
      third_leader: this.$route.params.third_leader,
      dialogFormVisible: false,
      form: {
        type: 0
      },
      userIds: [],
      userListTextarea: null,
      isDisabled: false,
      memberMsgTpl: {},
      isLoading: false
    };
  },
  created() {
    this.getPage();
    this.getMemberMsgTpl();
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e;
      this.getPage();
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getPage();
    },
    getPage() {
      var that = this;
      getUserList({
        user_id: this.user_id,
        account: this.account_p,
        nickname: this.nickname,
        first_leader: this.first_leader,
        second_leader: this.second_leader,
        third_leader: this.third_leader,
        p: this.currentPage,
        size: this.pageSize
      }).then(function(res) {
        that.tableData = res.records;
        that.totalCount = res.total;
      });
    },
    refresh() {
      this.getPage();
      this.$message.success("刷新成功！");
    },
    address(scope) {
      this.$router.push({
        name: "member_address",
        params: {
          id: scope.row.user_id
        }
      });
    },
    account(scope) {
      this.$router.push({
        name: "member_account",
        params: {
          id: scope.row.user_id
        }
      });
    },
    detail(scope) {
      this.$router.push({
        name: "member_details",
        params: {
          user_id: scope.row.user_id
        }
      });
    },
    addMember() {
      this.$router.push({
        name: "add_member"
      });
    },
    memberExport() {
      //获取选中的记录
      var rows = this.$refs.multipleTable.selection;
      var ids = [];
      rows.forEach(e => {
        ids.push(e.user_id);
      });
      //拼接参数
      var paramsStr = "s=1";
      if (ids.length > 0) {
        paramsStr += "&user_ids=" + ids.join(",");
      } else if (this.user_id) {
        paramsStr += "&user_ids=" + this.user_id;
      } else {
        if (this.account_p != null && this.account_p !== "") {
          paramsStr += "&account=" + this.account_p;
        }
        if (this.nickname != null && this.nickname !== "") {
          paramsStr += "&nickname=" + this.nickname;
        }
        if (this.first_leader != null) {
          paramsStr += "&first_leader=" + this.first_leader;
        }
        if (this.second_leader != null) {
          paramsStr += "&second_leader=" + this.second_leader;
        }
        if (this.third_leader != null) {
          paramsStr += "&third_leader=" + this.third_leader;
        }
      }
      window.location.href = "user/export?" + paramsStr;
    },
    getSelectionUserIds() {
      //获取选中的记录
      var rows = this.$refs.multipleTable.selection;
      var ids = [];
      rows.forEach(e => {
        ids.push(e.user_id);
      });
      return ids;
    },
    getMemberMsgTpl() {
      var that = this;
      getMemberMsgTpl({ mmt_code: "message_notice" }).then(function(res) {
        that.memberMsgTpl = res;
      });
    },
    showDialog() {
      var that = this;
      if (this.userIds.length == 0) {
        //非单个发送，获取多选
        this.userIds = this.getSelectionUserIds();
      }
      if (this.userIds.length > 0) {
        this.isDisabled = false;
        //批量选择发送，请求发送会员的信息
        this.request
          .get("user/list?user_ids=" + this.userIds)
          .then(function(res) {
            var str = "";
            res.forEach(e => {
              str += e.user_id + "\t" + e.nickname + "\n";
            });
            that.userListTextarea = str;
            that.form.type = 1;
          });
      } else {
        //未选择会员点击活动通知按钮全体发送时禁用以下会员单选项
        this.isDisabled = true;
      }
      this.dialogFormVisible = true;
    },
    onSubmit() {
      this.isLoading = true;
      var that = this;
      this.form.user_ids = this.userIds;
      sendNoticeMsg(this.form).then(function(res) {
        if (res.status == 1) {
          that.$message.success("发送成功！");
          that.dialogFormVisible = false;
        }
        that.isLoading = false;
      });
    },
    initData() {
      this.userIds = [];
      this.form = { type: 0 };
      this.userListTextarea = null;
    }
  }
};
</script>

<style scoped>
.searchinput {
  width: auto;
}
</style>
